﻿$(function() {
    var $liList = $('li');
    var $divList = $('.carousel');
    var count = 0 /**记录点击了左右按钮后，mouseout才生效 */
    carouselPlay(0);
    $('ul li').on('mouseover', function() {
        clearInterval(timeplay);
        var index = $(this).index();
        $(this).addClass('active-li').siblings().removeClass('active-li');
        $divList.hide().eq(index).delay(100).show();
    }).on('mouseout', function() {
        var index = $(this).index();
        carouselPlay(index);
    });

    $('#right').on('click', function() {
        clearInterval(timeplay);
        if (!count) {
            count++;
        }
        var index = $('.active-li').index();
        index++;
        if (index == 5) {
            index = 0;
        }
        $liList.eq(index).addClass('active-li').siblings().removeClass('active-li');
        $divList.hide().eq(index).delay(100).show();



    }).on('mouseout', function() {
        if (count--) {
            var index = $('li.active-li').index();
            carouselPlay(index);
        }
    });

    $('#left').on('click', function() {
        clearInterval(timeplay);
        if (!count) {
            count++;
        }
        var index = $('.active-li').index();
        index--;
        if (index == -1) {
            index = 4;
        }
        $liList.eq(index).addClass('active-li').siblings().removeClass('active-li');
        $divList.hide().eq(index).delay(100).show();



    }).on('mouseout', function() {
        if (count--) {
            var index = $('li.active-li').index();
            carouselPlay(index);
        }


    });

    function carouselPlay(start) {
        var index = start;
        timeplay = setInterval(function() {
            index++;
            if (index == 5) {
                index = 0;
            }
            $liList.removeClass('active-li').eq(index).addClass('active-li');
            $divList.hide().eq(index).delay(100).show();

        }, 3000);

    }


});